<template>
	<!-- 订单详情 -->
	<view>
		<NavbarHead :toTop="false" backColor="#fff" bgColor="rgba(0,0,0,0)"></NavbarHead>
		<view class="topBox" :style="{'padding-top':topHeadHeight+ 'rpx' }">
			<!-- 订单状态 -->

			<state :orderState="orderState" :countDown="countDown">

			</state>
			<view class="state-main card">
				<view class="u-line-1">
					<image src="http://qiniu.suboshimuying.cn/static/order/ic_loc2.png" mode=""></image>
					<text>{{details.pladress}}</text>
				</view>
				<view style="padding-left: 48rpx;color: #646566;font-size: 24rpx;" class="u-line-1">
					{{details.plname}}&nbsp;&nbsp;{{details.plmobile}}
				</view>
			</view>
		</view>
		<view class="goodsBox">
			<goodsList :list="details.goods_list" :typeState="details.order_type" />

			<!-- 薅羊毛  // 1:热卖 2:本地服务 3:薅羊毛 4:镇店之宝-->
			<template v-if="details.order_type===3">
				<view class="card">
					<view class="otherBox-row" style="text-align: right;">
						<text>取货方式</text>
						<text class="right u-line-1">{{details.server_type===1?'上门':'到店'}}</text>
					</view>
				</view>
			</template>

			<template v-if="details.order_type===2">
				<view class="card">
					<view class="otherBox-row" style="text-align: right;">
						<text>服务时间</text>
						<text
							class="right u-line-1">{{$u.timeFormat(details.goods_list[0].server_start_time, 'yyyy-mm-dd hh:MM')}}-{{$u.timeFormat(details.goods_list[0].server_end_time, 'hh:MM')}}</text>
					</view>
					<view class="otherBox-row" style="text-align: right;">
						<text>上门人员</text>
						<text class="right u-line-1">{{details.goods_list[0].call_pel}}</text>
					</view>
				</view>
			</template>

			<view class="otherBox card">
				<view class="otherBox-row">
					<text>下单备注</text>
					<text class="right u-line-1">{{details.remark ||''}}</text>
				</view>
				<view class="otherBox-row">
					<text>订单编号</text>
					<text class="right u-line-1">{{details.order_no}}</text>
					<text style="color: #969799;" @click="copy(details.order_no)">复制</text>
				</view>
				<view class="otherBox-row" v-for="item in details.status_list" :key="item.id">
					<text>{{itemName(item.status)}}</text>
					<text class="right u-line-1">{{item.createtime}}</text>
				</view>
			</view>
		</view>
		<view class="fixedBox">
			<template v-if="orderState===1">
				<view class="fixedBox-item cancel" @click="btnClick(1)">
					取消订单
				</view>
			</template>
			<template v-if="orderState===2">
				<view class="fixedBox-item" @click="btnClick(2)">
					确认完成
				</view>
			</template>
			<template v-if="orderState===1">
				<view class="fixedBox-item" @click="orderAllPay">
					支付订单
				</view>
			</template>
			<template v-if="details.order_type===1">
				<template v-if="orderState=== 3 ||orderState===  5||orderState===  7">
					<view class="fixedBox-item cancel"
						@click="toUrl(`/subPages/refund/refund?id=${details.id}&orderNum=${details.order_no}`)">
						申请退款
					</view>
				</template>
			</template>
			<template v-if="orderState===5 ||orderState===4">
				<view class="fixedBox-item" @click="btnClick(2)">
					确认收货
				</view>
			</template>
			<template v-if="orderState===6">
				<view class="fixedBox-item cancel" @click="toUrl(`/subPages/evaluation/evaluation?id=${details.id}`)">
					去评价
				</view>
			</template>
		</view>
		<MessageBox :showFlag="showFlag" @MesBoxCallback="callback" @popupClose="showFlag=false" />
	</view>
</template>

<script>
	import NavbarHead from '../../components/NavbarHead/NavbarHead.vue'
	import MessageBox from '@/components/MessageBox/MessageBox.vue'
	import goodsList from './goodsList.vue'
	import state from './state.vue'
	export default {
		data() {
			return {
				topHeadHeight: 172, //顶部导航栏高度	
				//1=待付款,2=待服务,3=待发货,4=待自提,5=待收货,6=待评价,7=已完成,11=已取消,12=退货
				orderState: null, //订单状态
				details: {}, //订单信息
				showFlag: false, //确定弹出层
				funNum: null, //用户区分操作
				countDown: null, //倒计时
			};
		},
		components: {
			NavbarHead,
			goodsList,
			state,
			MessageBox
		},
		onLoad(option) {
			// 计算顶部导航栏高度
			// console.log(option);
			this.getorderDet(option.id)
			this.topHeadHeight = uni.getStorageSync('headHeight') * 2 || 172
		},
		methods: {
			itemName(value) {
				if (this.details.order_type == '1') {
					// 商品订单
					switch (value) {
						case 1:
							return "下单时间"
							break;
						case 3:
							return "付款时间"
							break;
						case 5:
							return "发货时间"
							break;
						case 6:
							return "到货时间"
							break;
						case 7:
							return "评论时间"
							break;
						case 11:
							return "取消时间"
							break;
						case 12:
							return "退货时间"
							break;
						default:
							break;
					}
				} else if (this.details.order_type == '2') {
					//服务订单
					switch (value) {
						case 1:
							return "下单时间"
							break;
						case 2:
							return "付款时间"
							break;
						case 6:
							return "服务时间"
							break;
						case 7:
							return "评论时间"
							break;
						case 11:
							return "取消时间"
							break;
						case 12:
							return "退货时间"
							break;
						default:
							break;
					}
				} else {
					//薅羊毛订单
					switch (value) {
						case 1:
							return "下单时间"
							break;
						case 2:
							return "付款时间"
							break;
						case 7:
							return "完成时间"
							break;
						case 11:
							return "取消时间"
							break;
						default:
							break;
					}
				}

			},
			// 跳转
			toUrl(url) {
				uni.navigateTo({
					url
				})
			},
			// 复制按钮
			copy(copyData) {
				uni.setClipboardData({
					data: String(copyData), //要被复制的内容 :String
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: '复制成功'
						})
					}
				});
			},
			// 支付订单
			async orderAllPay() {
				let {
					code,
					msg,
					data
				} = await this.$api.orderAllPay({
					id: this.details.id
				})
				if (code === 1) {
					this.paymentCallBack(data)
				} else {
					this.$u.toast(msg)
				}
				// console.log(code, data);
			},
			// 微信支付
			paymentCallBack(data) {
				let that = this
				uni.requestPayment({
					provider: 'wxpay', // 服务提提供商
					timeStamp: data.timeStamp, // 时间戳
					nonceStr: data.nonceStr, // 随机字符串
					package: data.package,
					signType: data.signType, // 签名算法
					paySign: data.paySign, // 签名
					success(res) {
						//支付成功回调
						that.$u.toast('支付成功')
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					},
					fail() {
						//支付失败回调
						that.$u.toast('已取消支付')
					}
				})
			},
			//操作方法
			btnClick(num) {
				this.funNum = num
				this.showFlag = true
			},
			// 弹出层确认回调
			async callback() {
				if (this.funNum === 1) {
					let res = await this.$api.offorder({
						id: this.details.id
					})
					this.$u.toast(res.msg)
					// console.log(res)
				} else {
					let res = await this.$api.conorder({
						id: this.details.id
					})
					this.$u.toast(res.msg)
					// console.log(res)
				}
				this.showFlag = false
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
			},
			// 获取订单详情
			async getorderDet(id) {
				let res = await this.$api.getorderDet({
					id
				})
				this.details = res.data
				this.orderState = res.data.order_status

				// 计时器
				res.data.status_list?.forEach(item => {
					if (item.status == 1) {
						let starttime = item.createtime //下单时间
						let start = new Date(starttime.replace(/-/g, "/")).getTime() //转换格式
						let endTime = start + 15 * 60000 //转为毫秒 ，此时是结束时间
						let date = new Date() //现在时间
						let now = date.getTime() //现在时间戳
						this.countDown = endTime - now //相差时间戳
					}
				})
				// console.log(res);
			},
		}
	}
</script>

<style>
	.u-count-down__text {
		color: #fff !important;
	}
</style>
<style lang="scss" scoped>
	.topBox {
		width: 100%;
		background: rgb(248, 249, 254);
		background: linear-gradient(0deg, rgba(248, 249, 254, 1) 0%, rgba(108, 82, 254, 0.8407738095238095) 37%, rgba(108, 82, 254, 1) 100%);
		box-sizing: border-box;
		padding: 0 24rpx;
	}

	.goodsBox {
		box-sizing: border-box;
		padding: 0 24rpx;
	}




	.otherBox {

		&-row {
			height: 64rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: rgba(50, 50, 51, 1);
			font-size: 26rpx;
			font-weight: 400;

			image {
				width: 24rpx;
				height: 24rpx;
				margin-left: 10rpx
			}

			.right {
				flex: 1;
				color: rgba(0, 0, 0, 0.8);
				font-size: 26rpx;
				font-weight: 500;
				display: inline-block;
				margin-left: 40rpx;
			}
		}
	}


	.fixedBox {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 188rpx;
		background-color: #fff;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		text-align: right;
		box-sizing: border-box;
		padding: 0 32rpx 68rpx;

		&-item {
			margin-left: 24rpx;
			width: 236rpx;
			height: 80rpx;
			border-radius: 80rpx;
			background: radial-gradient(235.8% 163.9% at 132.1% 0%, rgba(255, 245, 252, 1) 0%, rgba(208, 132, 255, 1) 23%, rgba(121, 101, 255, 1) 56.99999999999999%, rgba(131, 111, 255, 1) 82%, rgba(130, 111, 255, 1) 100%);
			line-height: 80rpx;
			text-align: center;
			color: rgba(255, 255, 255, 1);
			font-size: 28rpx;
			font-weight: 600;


		}

		.cancel {
			color: rgba(100, 101, 102, 1) !important;
			background: #fff !important;
			border: 1rpx solid rgba(220, 222, 224, 1) !important;

		}
	}

	.state-main {
		margin-top: 40rpx;

		image {
			width: 32rpx;
			height: 32rpx;
			vertical-align: middle;
			margin-left: 16rpx;
		}

	}
</style>
